{extend name="common/head"/}
{block name="body"}
<div class="container-fluid p-t-15">

    <div class="row">

        <div class="col-lg-12">
            <div class="card">
                <header class="card-header">
                    <div class="card-title">功能节点</div>
                </header>
                <div class="card-body">

                    <div class="toolbar-btn-action" id="toolbar2">
                        <button class="btn btn-primary m-r-5" onclick="sadd()" type="button">添加</button>
                        <button class="btn btn-primary m-r-5" onclick="test()" type="button">删除</button>
                    </div>

                    <table class="tree-table"></table>
                </div>
            </div>
        </div>

    </div>

</div>
{/block}
{block name="script"}
{include file="common/footer" base="base" /}
<!--以下是tree-grid的使用示例-->
<link href="{__ADMIN__}/js/jquery-treegrid/jquery.treegrid.min.css" rel="stylesheet">
<script src="{__ADMIN__}/js/jquery-treegrid/jquery.treegrid.min.js" type="text/javascript"></script>
<script src="{__ADMIN__}/js/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"
        type="text/javascript"></script>
<script type="text/javascript">

    var $treeTable = $('.tree-table');
    $treeTable.bootstrapTable({
        url: '/admin/rule/index',
        type: 'get',
        idField: 'id',
        uniqueId: 'id',
        dataType: 'json',
        toolbar: '#toolbar2',
        showRefresh: true, // 是否显示刷新按钮
        columns: [
            {
                field: 'check',
                checkbox: true
            },
            {
                field: 'title',
                title: '名称'
            },
            {
                field: 'src',
                title: '权限值'
            },
            {
                field: 'operate',
                title: '操作',
                align: 'center',
                events: {
                    'click .role-add': function (e, value, row, index) {
                        add(row.id);
                    },
                    'click .role-delete': function (e, value, row, index) {
                        del(row.id);
                    },
                    'click .role-edit': function (e, value, row, index) {
                        update(row.id);
                    }
                },
                formatter: operateFormatter
            }
        ],

        treeShowField: 'title',
        parentIdField: 'pid',

        onResetView: function (data) {
            $treeTable.treegrid({
                initialState: 'collapsed', // 所有节点都折叠
                treeColumn: 1,
                //expanderExpandedClass: 'mdi mdi-folder-open',  // 可自定义图标样式
                //expanderCollapsedClass: 'mdi mdi-folder',
            });

            // 只展开树形的第一集节点
            $treeTable.treegrid('getRootNodes').treegrid('expand');
        },
        onCheck: function (row) {
            var datas = $treeTable.bootstrapTable('getData');

            selectChilds(datas, row, 'id', 'pid', true); // 选择子类

            selectParentChecked(datas, row, 'id', 'pid'); // 选择父类

            $treeTable.bootstrapTable('load', datas);
        },

        onUncheck: function (row) {
            var datas = $treeTable.bootstrapTable('getData');
            selectChilds(datas, row, 'id', 'pid', false);
            $treeTable.bootstrapTable('load', datas);
        },
    });

    // 操作按钮
    function operateFormatter(value, row, index) {
        return [
            '<a type="button" class="role-add btn btn-xs btn-default m-r-5" title="添加" data-toggle="tooltip"><i class="mdi mdi-plus"></i></a>',
            '<a type="button" class="role-edit btn btn-xs btn-default m-r-5" title="修改" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>',
            '<a type="button" class="role-delete btn btn-xs btn-default" title="删除" data-toggle="tooltip"><i class="mdi mdi-delete"></i></a>'
        ].join('');
    }

    /**
     * 选中父项时，同时选中子项
     * @param datas 所有的数据
     * @param row 当前数据
     * @param id id 字段名
     * @param pid 父id字段名
     */
    function selectChilds(datas, row, id, pid, checked) {
        for (var i in datas) {
            if (datas[i][pid] == row[id]) {
                datas[i].check = checked;
                selectChilds(datas, datas[i], id, pid, checked);
            }

        }
    }

    function selectParentChecked(datas, row, id, pid) {
        for (var i in datas) {
            if (datas[i][id] == row[pid]) {
                datas[i].check = true;
                selectParentChecked(datas, datas[i], id, pid);
            }

        }
    }

    function add(id) {
        parent.$(parent.document).data('multitabs').create({
            iframe : true,                                // 指定为iframe模式，当值为false的时候，为智能模式，自动判断（内网用ajax，外网用iframe）。缺省为false。
            title : '添加节点',                     // 标题（可选），没有则显示网址
            url : '/admin/rule/add?pid=' + id                    // 链接（必须），如为外链，强制为info页
        }, true);
    }

    function sadd() {
        parent.$(parent.document).data('multitabs').create({
            iframe : true,                                // 指定为iframe模式，当值为false的时候，为智能模式，自动判断（内网用ajax，外网用iframe）。缺省为false。
            title : '添加节点',                     // 标题（可选），没有则显示网址
            url : '/admin/rule/add'                    // 链接（必须），如为外链，强制为info页
        }, true);
    }

    function del(id) {
        $.confirm({
            title: '提示',
            content: '您确定要删除吗？',
            icon: 'mdi mdi-alert',
            animation: 'scale',
            closeAnimation: 'zoom',
            buttons: {
                confirm: {
                    text: '确认，取消',
                    btnClass: 'btn-orange',
                    action: function() {
                        $.ajax({
                            url: "/admin/rule/delete",
                            type: 'post',
                            data: { id: id },
                            success: function (e) {
                                if (e.code == 0) {
                                    $(".tree-table").bootstrapTable('refresh');
                                }
                            }
                        })
                    }
                },
                '取消': function() {

                }
            }
        });
    }

    function update(id) {
        parent.$(parent.document).data('multitabs').create({
            iframe : true,                                // 指定为iframe模式，当值为false的时候，为智能模式，自动判断（内网用ajax，外网用iframe）。缺省为false。
            title : '编辑节点',                     // 标题（可选），没有则显示网址
            url : '/admin/rule/edit?pid=' + id                    // 链接（必须），如为外链，强制为info页
        }, true);
    }

    function test() {
        var selRows = $treeTable.bootstrapTable("getSelections");
        if (selRows.length == 0) {
            alert("请至少选择一行");
            return;
        }
        console.log(selRows);

        var postData = "";
        $.each(selRows, function (i) {
            postData += this.id;
            if (i < selRows.length - 1) {
                postData += "， ";
            }
        });
        alert("你选中行的 id 为：" + postData);
    }
</script>
{/block}
</body>
</html>